<!--
 * @Author: your name
 * @Date: 2021-04-07 19:40:48
 * @LastEditTime: 2021-05-17 11:01:07
 * @LastEditors: Please set LastEditors
 * @Description: 折线图 样式1
 * @FilePath: /medicine-web/src/components/Charts/LineChart.vue
-->
<template>
  <div class="line-chart-container">
    <div :id="elementId" style="height: 360px;"></div>
  </div>
</template>
<script>
import * as echarts from 'echarts';
export default {
  name: 'lineChart',
  data () {
    return {}
  },
  mounted () {
    this.initChart()
  },
  methods: {
    initChart () {
      var myChart = echarts.init(document.getElementById(this.elementId))
      myChart.setOption({
        title: {
          text: this.chartTitle,
          textStyle: {
            color: '#555555',
            fontSize: 14,
            fontWeight: 'bold'
          }
        },
        tooltip: {
          trigger: 'axis',
        },
        grid: {
          left: '2%',
          right: '2%',
          bottom: '30px',
          containLabel: true
        },
        legend: {
          show: this.isShowLegend,
          data: this.getLegend(),
          bottom: '0px',
          icon: 'path://M664.1 783c-3.8 0-7.6-0.2-11.3-0.5-36.3-3.1-68.9-20.6-96.9-52.1-28.4-32-52.5-79.4-71.4-140.8-32.4-105-66.1-182.6-100.3-230.6-25.5-35.8-50.2-54-73.4-54h-0.4c-38.8 0.4-84.8 51-129.3 142.7-37 76.2-59.4 153-59.7 153.8L64 582.6c1-3.4 24.3-83.1 63.7-164.3 56.8-117 118.1-176.6 182.1-177.3h1c43 0 83.8 26.7 121.2 79.3 38.2 53.7 75.1 137.5 109.5 249.3 29.3 94.9 68.3 145.1 116 149.1 21.3 1.8 45.6-5.2 72.2-20.9 24.5-14.4 50.3-35.8 76.8-63.5 49.6-51.9 87.7-111.9 100.1-137.6L960 526c-14.6 30.4-56.4 96.4-111.4 154-30.4 31.8-60.6 56.6-89.9 73.9-32.8 19.3-64.6 29.1-94.6 29.1z'
        },
        xAxis: {
          type: 'category',
          data: this.getXAxis(),
          boundaryGap: false,
          axisLine: {
            lineStyle: {
              color: '#D8D8D8'
            }
          },
          axisLabel: {
            color: '#ACACAC'
          }
        },
        yAxis: {
          type: 'value',
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          splitLine: {
            lineStyle: {
              color: ['#E6E6E6']
            }
          }
        },
        series: this.getSeries()
      })
    },
    getColor () {
      return Array.from(new Set(this.chartData.map(item => item.color)))
    },
    getLegend () {
      return Array.from(new Set(this.chartData.map(item => item.year)))
    },
    getXAxis () {
      return Array.from(new Set(this.chartData.map(item => item.type)))
    },
    getSeries () {
      let seriesList = []
      const yearList = this.getLegend()
      const color = this.getColor()
      for (const year of yearList) {
        seriesList.push({
          name: year,
          data: this.getSeriesData(year),
          type: 'line',
          smooth: true,
          symbol: 'circle',
          symbolSize: 8,
          lineStyle: {
            color: color[yearList.indexOf(year)]
          },
          itemStyle: {
            color: color[yearList.indexOf(year)],
            borderWidth: 1,
            borderColor: '#fff'
          }
        })
      }
      return seriesList
    },
    getSeriesData (year) { // 根据年份分类
      return this.chartData.filter(item => item.year == year).map(item => item.data)
    }
  },
  props: {
    elementId: {
      type: String,
      default: ''
    },
    chartTitle: {
      type: String,
      default: ''
    },
    chartData: {
      type: Array,
      default: () => []
    },
    isShowLegend: {
      type: Boolean,
      default: true
    }
  },
  watch: {
    chartData (val, old) {
      this.initChart()
    }
  }
}
</script>
<style lang="scss" scoped>
.line-chart-container {
  box-shadow: 5px 5px 6px #ccc;
  border-radius: 5px;
}
</style>